<template>
  <!-- 首页 -->
  <section id="home" class="main-banner">
    <div class="heading">
      <div class="clock">
        <div class="hand hours"></div>
        <div class="hand minutes"></div>
        <div class="hand seconds"></div>
        <div class="point"></div>
        <div class="marker">
          <span class="time">PM</span>
          <span class="marker__1"></span>
          <span class="marker__2"></span>
          <span class="marker__3"></span>
          <span class="marker__4"></span>
        </div>
      </div>
      <h1 class="h1-top">{{ sloganList.slogan_1 }}</h1>
      <br />
      <div class="container">
        <div class="row">
          <div
            v-for="menu in menuList"
            :key="menu.id"
            class="col-md-6 col-xs-6 home-bottom"
          >
            <router-link :to="{ name: menu.router }">
              <a href="JavaScript:0">
                <div>{{ menu.title }}</div>
              </a>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      menuList: [],
      sloganList: [],
      slogan_href: "",
      mid: 0,
    };
  },
  methods: {
    // 菜单列表：/api/home/menu
    getMenuList() {
      this.$http
        .menuList()
        .then((res) => {
          this.menuList = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getSloganList() {
      this.$http
        .sloganList()
        .then((res) => {
          this.sloganList = res[0];
          this.slogan_href =
            "https://s.weibo.com/weibo?q=%23" + this.sloganList.href + "%23";
        })
        .catch((err) => {
          console.log(err);
        });
    },
    clockCss() {
      setTimeout(function () {
        $(".clock div").css("transition", "all .3s ease-in-out");
      }, 100);
    },
    clock() {
      let today = new Date();
      let h = (today.getHours() % 12) + today.getMinutes() / 59; // 22 % 12 = 10pm
      let m = today.getMinutes(); // 0 - 59
      let s = today.getSeconds(); // 0 - 59
      if (s === 0) {
        this.mid += 60;
      }

      h *= 30; // 12 * 30 = 360deg
      m *= 6;
      let s_ = 6 * (s + this.mid); // 60 * 6 = 360deg

      $(".hours").css("transform", `rotate(${h}deg)`);
      $(".minutes").css("transform", `rotate(${m}deg)`);
      $(".seconds").css("transform", `rotate(${s_}deg)`);

      setTimeout(this.clock, 1000);
    },
  },
  // 生命周期  在created方法发起ajax请求
  created() {
    // 返回一个Axios实例化对象
    this.getMenuList();
    this.getSloganList();
    this.clockCss();
    this.clock();
  },
};
</script>

<style lang="css" scoped>
body {
  width: 100%;
  background-color: var(--greyLight-1);
}

.home-bottom {
  height: 100px;
  background-color: rgba(0, 0, 0, 0);
  margin: 20px 0 10px;
  padding: 0 40px;
}

.home-bottom div {
  width: 100%;
  height: 100%;
  line-height: 100px;
  border-radius: 20px;
  font-size: 35px;
  color: #333333;
  letter-spacing: 10px;
  font-weight: 200;
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2),
    -0.2rem -0.2rem 0.5rem var(--white);
}

#home.body_dark .home-bottom div {
  color: #cccccc;
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyDark),
    -0.2rem -0.2rem 0.5rem var(--primary-dark);
}

.home-bottom div:hover {
  color: darkorange;
}

#home.body_dark .home-bottom div:hover {
  color: var(--a-dark-hover);
}

.home-bottom div:active {
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2),
    inset -0.2rem -0.2rem 0.5rem white;
}

#home.body_dark .home-bottom div:active {
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyDark),
    inset -0.2rem -0.2rem 0.5rem var(--primary-dark-2);
}

.main-banner {
  position: relative;
  display: table;
  width: 100%;
  text-align: center;
}

.heading {
  color: #fff;
  vertical-align: middle;
  position: relative;
  z-index: 1;
  margin: 60px 0;
}

.heading h1 {
  color: #444444;
  letter-spacing: 0.25em;
  font-weight: 100;
  font-size: 35px;
  text-transform: uppercase;
}

.heading .h1-top {
  margin-top: 12rem;
  color: #999999;
}

.heading h3 {
  margin-top: 10px;
}

.heading h3 span {
  font-weight: 300;
  color: #333333;
}

.heading h3 span:hover {
  color: darkorange;
}

#home.body_dark h1,
#home.body_dark .heading h3 span {
  color: #cccccc;
}

#home.body_dark .heading .h1-top {
  color: #666666;
}

#home.body_dark .heading h3 span:hover {
  color: var(--a-dark-hover);
}

/*  CLOCK  */
.clock {
  grid-column: 2/3;
  grid-row: 1/3;
  width: 12rem;
  height: 12rem;
  justify-self: center;
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2),
    -0.2rem -0.2rem 0.5rem var(--white);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 9rem;
  left: 50%;
  margin-left: -7em;
}

body.body_dark .clock {
  box-shadow: 0.3rem 0.3rem 0.6rem var(--greyDark),
    -0.2rem -0.2rem 0.5rem var(--primary-dark);
}

.clock .hand {
  position: absolute;
  transform-origin: bottom;
  bottom: 6rem;
  border-radius: 0.2rem;
  z-index: 200;
}

.clock .hours {
  width: 0.33rem;
  height: 3.2rem;
  background: #333333;
  opacity: 0.9;
}

.clock .minutes {
  width: 0.25rem;
  height: 4.6rem;
  background: #333333;
  opacity: 0.8;
}

body.body_dark .clock .hours,
body.body_dark .clock .minutes {
  background-color: #dddddd;
}

.clock .seconds {
  width: 0.1rem;
  height: 5.2rem;
  background: darkorange;
  z-index: 300;
}

.clock .point {
  position: absolute;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: darkorange;
  z-index: 3000;
}

body.body_dark .clock .seconds,
body.body_dark .clock .point {
  background-color: var(--a-dark-hover);
}

.clock .marker {
  width: 95%;
  height: 95%;
  border-radius: 50%;
  position: relative;
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyLight-2),
    inset -0.2rem -0.2rem 0.5rem var(--white);
}

body.body_dark .clock .marker {
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyDark),
    inset -0.2rem -0.2rem 0.5rem var(--primary-dark-2);
}

.clock .marker::after {
  content: "";
  width: 60%;
  height: 60%;
  position: absolute;
  box-shadow: inset 1px 1px 1px var(--greyLight-2),
    inset -1px -1px 1px var(--white);
  border-radius: 50%;
  top: 20%;
  left: 20%;
  filter: blur(1px);
}

body.body_dark .clock .marker::after {
  box-shadow: inset 0.2rem 0.2rem 0.5rem var(--greyDark),
    inset -0.2rem -0.2rem 0.5rem var(--primary-dark-2);
}

.clock .time {
  position: absolute;
  width: 6rem;
  left: 50%;
  margin-left: -3rem;
  text-align: center;
  color: #999999;
}

.clock .time {
  top: 3rem;
}

body.body_dark .clock .time {
  color: #666666;
}

.clock .marker__1,
.clock .marker__2,
.clock .marker__3,
.clock .marker__4 {
  position: absolute;
  border-radius: 0.1rem;
  box-shadow: inset 1px 1px 1px var(--greyLight-2),
    inset -1px -1px 1px var(--white);
}

body.body_dark .clock .marker__1,
body.body_dark .clock .marker__2,
body.body_dark .clock .marker__3,
body.body_dark .clock .marker__4 {
  box-shadow: inset 1px 1px 1px var(--greyDark),
    inset -1px -1px 1px var(--primary-dark-2);
}

.clock .marker__1,
.clock .marker__2 {
  width: 0.2rem;
  height: 0.6rem;
  left: 5.6rem;
}

.clock .marker__3,
.clock .marker__4 {
  width: 0.6rem;
  height: 0.2rem;
  top: 5.6rem;
}

.clock .marker__1 {
  top: 2%;
}

.clock .marker__2 {
  top: 98%;
  transform: translateY(-0.6rem);
}

.clock .marker__3 {
  left: 2%;
}

.clock .marker__4 {
  left: 98%;
  transform: translateX(-0.6rem);
}
</style>
